﻿<template>
	<div class='content'>
		<div class='banner'>
			<!--<h1>城市大共享计划</h1>-->
			<img :src='src' />
		</div>
		<div class='introduce'>
			<div class='text mar1'>
				<p>EEA以太联合 以开放平台和共享精神</p>
				<p>接纳每一颗热衷共享的种子</p>
				<p>一同繁衍它的“共享 以太资源计划”</p>
			</div>
			<div class='pic mar1'>
				<img :src='src2' />
				<div class='ad'>
					<h3>连接以太币<br>但不生产以太币</h3>
					<p class='word'>EEA以太联合，不断连接更多优秀的区域链品牌与生产商，接入更多产品线来满足用户的多元需求，提供广大客户更高质量的服务。</p>
					<p class='word'>同时，EEA以太联合 欢迎客户交易自己的虚拟币，加入“共享 以太资源计划”，以 1 换 N ，提升闲置以太币的使用效率。</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'shareContent',
		data () {
			return {
				src: 'static/img/share1.jpg',
				src2: 'static/img/share2.jpg'
			}
		}
	}
</script>
<style lang='scss'>
	@mixin fade-in {
        -webkit-animation: fadeIn 2s 0.5s ease both;
        -moz-animation: fadeIn 2s 0.5s ease both;
        -ms-animation: fadeIn 2s 0.5s ease both;
        -o-animation: fadeIn 2s 0.5s ease both;
        animation: fadeIn 2s 0.5s ease both;		
	}
	.content .banner h1{
		position: absolute;
		width: 100%;
		top: 40%;
		z-index: 8;
		color: white;
		font-size: 66px;
		@include fade-in;
	}
	.introduce {
		position: relative;
		width: 100%;
		height: 100%;
		top: -10%;
		img {
			width: 400px;
			height: 400px;
		}
	}
	.pic{
		position: relative;
		img{
			left: -15%;
			position: relative;
		}
	}	
	.ad{
		position: absolute;
		top: 10%;
		left: 55%;
        width: 336px;
		 h3 {
			text-align: left;
			font-size: 36px;
			color: #585858;
			font-weight: 500;
		}
	}
	.word{
		font-size: 14px;
		color: #4b4b4b;
		line-height: 22px;
		text-align: left;
		margin: 0;
		padding: 0;
        padding-bottom: 10px;
	}
	.mar1{
		margin: 50px 0 50px;
	}
</style>